<template>
	<view>
		<view style="margin: 30rpx;background-color: #FFFFFF;border-radius: 16rpx;padding:20rpx;">
			<view style="border-bottom: 1px solid #F3F3F3;display: flex;align-items: center;padding-bottom: 20rpx;">
				<image style="width: 25px;height: 25px;border-radius: 50%;margin-right: 15rpx;" :src="shop_image"></image>
				<view>{{shop_name}}</view>
			</view>
			<view style="margin: 20rpx 0;">
				评分 <u-rate :count="count" active-color="#FE7F1A" v-model="score" :disabled="disabled"></u-rate>
			</view>
			<view>
				<textarea style="width: 100%;margin-top: 35rpx;height: 80px;" placeholder-style="color:#999999;font-size:26rpx"
				 maxlength="200" v-model="evaluate" placeholder="说点什么吧~" :disabled="disabled" />
				<view style="text-align: right;color: #999999;font-size: 24rpx;line-height: 30rpx;" v-if="!look">{{evaluate.length}}/200</view>
				<view  v-if="look" style="color: #999999;font-size: 24rpx;line-height: 30rpx;">发布于：{{createtime_text}}</view>
			</view>
		</view>
		<view  v-if="!look" style="position: fixed;bottom: 100px;width: 100%;display: flex;justify-content: center;">
			<view class="submit" @click="submit">提交</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {  
		data() {
			return {
				count: 5,
				score: 1,
				evaluate:"",
				look:false,
				disabled:false,
				orderInfo:null,
				createtime_text:"",
				shop_name:"",
				shop_image:""
			}
		},
		onShow() { 
			if(this.look){
				uni.setNavigationBarTitle({
					title: '查看评价'
				});
			}else{
				uni.setNavigationBarTitle({
					title: '发表评价'
				});
			}
			
		},
		onReady() {
			var shop_image=decodeURIComponent(this.shop_image)
			this.shop_image=shop_image
		},
		onLoad(option) {
			this.init(option)
		},
		methods: {
			 init(option){
				console.log(option)
				this.look = option.isLook == '1' ? true : false
				this.shop_name=decodeURI(option.shop_name)
				this.order_id=option.orderId
				var shop_image=decodeURIComponent(option.shop_image)
				this.shop_image=shop_image
				if(option.isLook == '1'){
					this.commentDetail();
				}
			},
			submit(){
				var data={
					token: uni.getStorageSync("token"),
					order_id:this.order_id,
					score:this.score,
					comment:this.evaluate
				}
				console.log(data);
				var that = this;
				that.$https('category.orderComment', data)
					.then(res => {
						if (res.code === 1) {
							this.$refs.uToast.show({
													type: 'default',
													title: '评价成功',
													iconUrl: '/static/images/success.png',duration:2000
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);
						}
					});
				
			},
			commentDetail(){
				var data={
					token: uni.getStorageSync("token"),
					order_id:this.order_id,
				}
				console.log(data);
				var that = this;
				that.$https('category.commentDetail', data)
					.then(res => {
						console.log(res);
						if (res.code === 1) {
							that.evaluate=res.data.comment.comment;
							that.createtime_text=res.data.comment.createtime_text;
							that.score=res.data.comment.score;
							that.disabled=true;
							that.shop_name=res.data.shop.shop_name
						}
					});
				
			}
			
		}
	}
</script>

<style>
	page{
		background: #f8f8f8!important;
	}
	.submit{
		margin:auto  20px;
		height: 40px;
		width: 80%;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 16px;
		background: #fd5e5d;
		border-radius: 50rpx;
		text-align: center;
		line-height: 40px;
	}
	.u-page {
		padding: 0;
	}
	
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
	
	.u-cell-group__title__text {
		font-weight: bold;
	}
	.u-toast{
		padding: 20px 45px;
	}
	.u-text{
		line-height: 30px;
	}
</style>
